<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      width: 550px;
      height: 50px;
      background-color: rgb(225, 225, 225);
      text-align: center;
      line-height: 50px;
      display: inline-block;
    }

    .box {
      width: 1660px;
      height: 300px;
      background-color: antiquewhite;
    }

    img {
      width: 200px;
      height: 200px;
      margin-left: 230px;
    }

    .span {
      margin-left: 230px;
    }


    .title-div {
      display: inline-block;
    }

    h1 {
      text-align: center;
    }

    .boxs {
      background-color: rgb(227, 227, 227);
      /* margin: auto; */
    }
  </style>
</head>

<body>
  <h1>商品</h1>
  <div class="title">空调</div>
  <div class="title">平板电脑</div>
  <div class="title">洗衣机</div>
  <div class="box">
    <!-- <div class="title-div">
      <img src="https://imgs.699pic.com/images/600/814/824.jpg!detail.v1"><br>
      <span class="span">空调1</span>
      <span>1554</span>
      <button>添加购物车</button>
    </div> -->
  </div>
  <h1>购物车</h1>
  <input type="checkbox" onclick="quan()" class="inps">全选
  <input type="checkbox" onclick="fan()" class="inps1">反选
  <button onclick="dels()">删除选中</button>
  <div class="boxs">
    <!-- <div class="title-divs">
      <img src="https://imgs.699pic.com/images/600/814/824.jpg!detail.v1">
      <span class="span">空调1</span>
      <span>1554</span>
      <button>+</button>
      <button>-</button>
    </div> -->
  </div>
  <h1>总价:<span class="sp">0</span></h1>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script>
    var obj = [{
      pid: 0,
      id: 1,
      img: 'https://imgs.699pic.com/images/600/814/824.jpg!detail.v1',
      name: '空调1',
      pic: 3488,
    }, {
      pid: 0,
      id: 2,
      img: 'https://img95.699pic.com/photo/60045/4800.jpg_wh860.jpg',
      name: '空调2',
      pic: 1400,
    }, {
      pid: 0,
      id: 3,
      img: 'https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619027912475.jpg',
      name: '空调3',
      pic: 5266,
    }, {
      pid: 1,
      id: 4,
      img: 'https://2c.zol-img.com.cn/product/199_800x600/640/ce8o2KSvchYIo.jpg',
      name: '平板电脑1',
      pic: 7538,
    }, {
      pid: 1,
      id: 5,
      img: 'https://imgservice.suning.cn/uimg1/b2c/image/gWmc_J9Ji0Qn28zsGPnSmQ.jpg',
      name: '平板电脑2',
      pic: 3000,
    }, {
      pid: 1,
      id: 6,
      img: 'https://imgservice.suning.cn/uimg1/b2c/image/TmVAN2S4Yczv2ZQMgxGn6A.jpg_800w_800h_4e',
      name: '平板电脑3',
      pic: 5000,
    }, {
      pid: 2,
      id: 7,
      img: 'https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619031590461.jpg',
      name: '洗衣机1',
      pic: 2000,
    }, {
      pid: 2,
      id: 8,
      img: 'https://pic.midea.cn/ImageStore/196047/pic/20e322bcee51105bA20274/20e322bcee51105bA20274.jpg',
      name: '洗衣机2',
      pic: 6000,
    }, {
      pid: 2,
      id: 9,
      img: 'https://pic.midea.cn/ImageStore/219467/pic/b191ccf904ed0653A9796/b191ccf904ed0653A9796.jpg',
      name: '洗衣机3',
      pic: 7000,
    },]
    //渲染
    var box = document.querySelector('.box')
    var boxs = document.querySelector('.boxs')
    var title = document.querySelectorAll('.title')
    obj.forEach(item => {
      if (item.pid == 0) {
        box.innerHTML += `
            <div class="title-div">
              <img src="${item.img}"><br>
              <span class="span">名称:${item.name}</span>
              <span>￥:${item.pic}</span>
              <button onclick='tian(${item.id})'>添加购物车</button>
            </div>
              `
      }
    })
    function fn() {
      title.forEach((item, index) => {
        item.addEventListener('click', () => {
          box.innerHTML = ''
          obj.forEach(item => {
            if (item.pid == index) {
              box.innerHTML += `
    <div class="title-div">
      <img src="${item.img}"><br>
      <span class="span">名称:${item.name}</span>
      <span>￥:${item.pic}</span>
      <button onclick='tian(${item.id})'>添加购物车</button>
    </div>
              `
            }
          })
        })
      })
    }
    fn()
    //添加购物车
    var arr = []
    function tian(id) {
      var a = obj.find(item => item.id == id)
      arr.push({
        pid: a.pid,
        id: arr.length + 1,
        img: a.img,
        name: a.name,
        pic: a.pic,
        num: 1,
        is: false
      })
      apply()
    }
    function apply() {
      boxs.innerHTML = ''
      arr.forEach(item => {
        boxs.innerHTML += `
    <div class="title-div">
      <input type="checkbox" ${item.id}?:'checked':"" onclick='zong(${item.id})'>
      <img src="${item.img}">
      <span class="span">名称:${item.name}</span>
      <span>￥:${item.pic}</span>
      <button onclick='jia(${item.id})'>+</button>
      <span>${item.num}</span>
      <button onclick='jian(${item.id})'>-</button>
       <button onclick='del(${item.id})'>删除</button>
    </div><br>
              `
      })
    }
    //全选
    var inps = document.querySelector('.inps')
    function quan() {
      var inp = document.querySelectorAll('.title-div input')
      inp.forEach(item => item.checked = inps.checked)
      var j = 0
      arr.forEach(item => {
        if (inps.checked) {
          j += item.pic * item.num
        }
      })
      document.querySelector('.sp').innerHTML = `${j}`
    }
    //反选
    var fan1 = document.querySelector('.inps1')
    function fan() {
      var inp = document.querySelectorAll('.title-div input')
      inp.forEach(item => item.checked = !inps.checked)
      var j = 0
      arr.forEach(item => {
        if (fan1.checked) {
          j += item.pic * item.num
        }
      })
      document.querySelector('.sp').innerHTML = `${j}`
    }
    //+
    function jia(id) {
      var a = arr.find(item => item.id == id)
      a.num++
      apply()
    }
    //-
    function jian(id) {
      var a = arr.find(item => item.id == id)
      if (a.num != 1) {
        a.num--
        apply()
      }
    }
    //删除
    function del(id) {
      var a = arr.findIndex(item => item.id == id)
      arr.splice(a, 1)
      apply()
    }
    //总价
    function zong(id) {
      var a = arr.find(item => item.id == id)
      a.is = event.target.checked
      var j = 0
      arr.forEach(item => {
        if (item.is) {
          j += item.pic * item.num
        }
      })
      document.querySelector('.sp').innerHTML = `${j}`
    }
    //
    function dels() {
      var inp = document.querySelectorAll('.title-div input')
      inp.forEach((item, index) => {
        if (item.checked) {
          arr.splice(index, 1)
        }
      })
      document.querySelector('.sp').innerHTML = `0`
      apply()
    }
  </script>
</body>

</html>